<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Edit Code</title>
</head>

<style>
  * {
    margin:0;
    padding:0;
  }

  body {
    background-color:#B0C4DE;
  }

  header {
    height: 60px;
    text-align: center;
    line-height: 60px;
    background-color:#333;
    color: white; 
    font-size: 30px;
    font-weight: bold;
    font-family: "微软雅黑";
  }
  
  footer {
    height: 30px;
    text-align: center;
    line-height: 30px;
    background-color:#333;
    color: white; 
    font-size: 15px;
    font-family: "微软雅黑";
  }
  div{
    margin:20px;
    padding: 5px;
  }

  textarea, iframe {
    border: 2px solid #808080;
    background-color: white;
  }

  textarea {
    width:600px;
    height:200px;
    padding:10px;
  }

  iframe {
    width: 650px;
    height:850px;
    font-family: "微软雅黑";
  }

  #display {
    float: right;
  }

  h1 {
    font-size: 20px;
    font-weight: bold;
    color: black;
  }

  p {
    font-size: 10px;
  }

  h1,p {
    font-family: "微软雅黑";
  }

  button {
    width: 600px;
    height: 30px;
    background-color: #1E90FF;
    border:2px solid #008B8B;
    margin:0px 30px 10px 30px;
    color:white;
    font-weight: bold;
    font-size: 15px;
    font-family:"微软雅黑";
    border-radius: 15px;
  }
  button:hover {
    background-color: #00BFFF;
  }
</style>

<body>
  <header>Code Edit And Preview Page</header>

  <div id="display">
    <h1>预览</h1>
    <iframe src="code_display.html"></iframe>
  </div>
  
  <div id="html">
    <h1>html</h1>
    <p>&lt;body&gt;</p>
    <textarea placeholder="请输入body内的html代码"></textarea>
    <p>&lt;/body&gt;</p>
  </div>
  
  <div id="css">
    <h1>css</h1>
    <p>&lt;style&gt;</p>
    <textarea placeholder="请输入style标签内的css代码"></textarea>
    <p>&lt;/style&gt;</p>
  </div>

  <div id="javaScript">
    <h1>javaScript</h1>
    <p>&lt;script&gt;</p>
    <textarea placeholder="请输入script标签内的javaScript代码"></textarea>
    <p>&lt;/script&gt;</p>
  </div>

  <button id="submit">提 交</button>
  <footer>©CopyRight hh2o4</footer>

  <script>
    function handleSubmit() {
      var html = document.getElementById("html").getElementsByTagName("textarea")[0].value;
      var css = document.getElementById("css").getElementsByTagName("textarea")[0].value;
      var javaScript = document.getElementById("javaScript").getElementsByTagName("textarea")[0].value;

      var iframe = document.getElementsByTagName("iframe")[0];
      var iframeWindow = iframe.contentWindow;
      
      iframeWindow.document.getElementById("body").innerHTML = html;
      iframeWindow.document.getElementsByTagName("style")[0].innerHTML = css;
      

      var scriptNode = document.createElement("script");
      scriptNode.textContent = javaScript;
      iframeWindow.document.getElementsByTagName("body")[0].appendChild(scriptNode);
      
      //iframeWindow.document.getElementsByTagName("script")[0].innerHTML = javaScript;
      window.scrollTo(0,0);
    }

    function test() {
      var html = document.getElementById("html").getElementsByTagName("textarea")[0].value;
      var css = document.getElementById("css").getElementsByTagName("textarea")[0].value;
      var javaScript = document.getElementById("javaScript").getElementsByTagName("textarea")[0].value;

      var result = "<!DOCTYPE html><html><head><meta charset='UTF-8'><title>Document</title><style>" + css + "</style></head><body>"+ html + "<script>" + javaScript + "<"+"/script></body></html>";

      var srcdoc = result;
      var iframe = document.getElementsByTagName("iframe")[0];
      iframe.srcdoc = srcdoc;
      window.scrollTo(0,0);
    }
    var submit = document.getElementById("submit");
    submit.addEventListener("click",handleSubmit);
  </script>
</body>
</html>